<template>
  <div class="hot-box">
    <div class="box-left">
      <div class="box-1">
        <el-carousel height="180px" indicator-position="none" class="carouse-top">
          <el-carousel-item v-for="item in 4" :key="item">
            <img class="images" src="https://static.mimowang.com/mimo/image_ad/banner/home-20230320.png" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="box">
        <div class="box-top">
        <span>
           <i class="iconfont icon-remen-copy"/>热门推荐
        </span>
          <span class="right-font">
          <a href="javascript:void (0)">查看更多</a> <i class="el-icon-arrow-right"/>
        </span>
        </div>
        <div class="box-list">
          <div class="nav-li over-hide-1">
            <i class="iconfont icon-xinpin1"/>
            <a href="javascript:void (0)">学校食堂餐饮服务投标方案（技术标 1002页）</a>
            <div class="btn-bgk"/>
          </div>
          <div class="nav-li over-hide-1">
            <i class="iconfont icon-xinpin1"/>
            <a href="javascript:void (0)">学校食堂餐饮服务投标方案（技术标 1002页）</a>
            <div class="btn-bgk"/>
          </div>
          <div class="nav-li over-hide-1">
            <i class="iconfont icon-xinpin1"/>
            <a href="javascript:void (0)">学校食堂餐饮服务投标方案（技术标 1002页）</a>
            <div class="btn-bgk"/>
          </div>
          <div class="nav-li over-hide-1">
            <i class="iconfont icon-xinpin1"/>
            <a href="javascript:void (0)">学校食堂餐饮服务投标方案（技术标 1002页）</a>
            <div class="btn-bgk"/>
          </div>
          <div class="nav-li over-hide-1">
            <i class="iconfont icon-xinpin1"/>
            <a href="javascript:void (0)">学校食堂餐饮服务投标方案（技术标 1002页）</a>
            <div class="btn-bgk"/>
          </div>
          <div class="nav-li over-hide-1">
            <i class="iconfont icon-xinpin1"/>
            <a href="javascript:void (0)">学校食堂餐饮服务投标方案（技术标 1002页）</a>
            <div class="btn-bgk"/>
          </div>
          <div class="nav-li over-hide-1">
            <i class="iconfont icon-xinpin1"/>
            <a href="javascript:void (0)">学校食堂餐饮服务投标方案（技术标 1002页）</a>
            <div class="btn-bgk"/>
          </div>
          <div class="nav-li over-hide-1">
            <i class="iconfont icon-xinpin1"/>
            <a href="javascript:void (0)">学校食堂餐饮服务投标方案（技术标 1002页）</a>
            <div class="btn-bgk"/>
          </div>
        </div>
      </div>
    </div>

    <div class="left-box"/>

    <div class="box-right">
      <div class="box-top-nav">
        <b>
          学校食堂餐饮服务投标方案（技术标 1002页）
          <el-tooltip class="item" effect="light" content="收藏此文档" placement="top-end">
            <a href="javascript:void (0)"><van-icon name="like" /></a>
          </el-tooltip>
        </b>
        <div class="box-buy">
          <a href="javascript:void (0)">¥ 100.2 立即购买</a>
          <a href="javascript:void (0)">去定制</a>
        </div>

        <div class="right-a">
          <el-tooltip class="item" effect="dark" content="顺序排列" placement="top-end">
            <a href="javascript:void (0)" @click="active=0" :class="{active:active===0}">
              <img v-if="active===0" src="@/assets/images/10.png" alt="">
              <img v-else src="@/assets/images/11.png" alt="">
            </a>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="书本排列" placement="top-end">
            <a href="javascript:void (0)" @click="active=1" :class="{active:active===1}">
              <img v-if="active===1" src="@/assets/images/2.png" alt="">
              <img v-else  src="@/assets/images/22.png" alt="">
            </a>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="九宫格排列" placement="top-end">
            <a href="javascript:void (0)" @click="active=2" :class="{active:active===2}">
              <img v-if="active===2" src="@/assets/images/3.png" alt="">
              <img v-else  src="@/assets/images/33.png" alt="">
            </a>
          </el-tooltip>
        </div>
      </div>

      <div class="box-doc-1">
        <vertical v-if="active===0"></vertical>
        <book v-else-if="active===1"></book>
        <Lattice v-else-if="active===2"></Lattice>
      </div>

      <div class="btn-top"  v-if="isTop>150 ">
        <b>学校食堂餐饮服务投标方案（技术标 1002页）
          <el-tooltip class="item" effect="light" content="收藏此文档" placement="top-end">
            <a href="javascript:void (0)"><van-icon name="like" /></a>
          </el-tooltip>
        </b>
        <div>
          <a href="javascript:void (0)">¥106.33 立即购买</a>
          <a href="javascript:void (0)">去定制</a>
        </div>

      </div>


    </div>
  </div>
</template>

<script>
import vertical from './Vertical.vue'
import book from './Book.vue'
import Lattice from "./Lattice.vue";
  export default {
    components:{vertical,book,Lattice},
    data(){
      return{
        active:0,
        isTop:0,
      }
    },
    methods:{
      getScroll(){
        window.addEventListener('scroll', () => {
          let scrollTop = document.documentElement.scrollTop
          this.isTop = scrollTop
        })
      },
    },
    mounted() {
      this.getScroll()
    }
  }
</script>

<style scoped lang="scss">

  @media all and (min-width:1250px ) {
    .hot-box{
      width: 1300px;
      min-height: 100vh;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      position: relative;
      .box-left{
        width: 350px;
        height: calc(100vh - 100px);
        /*background: #fff;*/
        border-radius: 10px;
        padding: 20px;
        box-sizing: border-box;
        position: fixed;
        .box{
          width: 100%;
          background:#fff;
          padding:15px;
          box-sizing: border-box;
          border-radius: 10px;
          .box-top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 40px;
            background: #fff;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            i{
              margin-right: 10px;
              font-size: 22px;
            }
            .right-font{
              font-weight: 500;
              font-size: 12px;
              color: #333;
              a{
                color: #666666;
              }
              i{
                font-size: 14px;
              }
            }
          }
          .box-list{
            width: 100%;
            height: 400px;
            background:#fff;
            .nav-li{
              width: 100%;
              font-size: 14px;
              color: #666;
              position: relative;
              display: flex;
              padding: 13px 0;
              align-items: center;
              border-bottom: 1px solid #f6f6f6;
              .btn-bgk{
                width: 0;
                height: 40px;
                background-image: linear-gradient(to right, #fff 0%, #fee140 100%);
                position: absolute;
                left: 0;
                z-index: 0;
              }
              i{
                font-size: 20px;
                z-index: 99;
              }
              a{
                display: flex;
                margin-left: 10px;
                color: #666;
                z-index: 99;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
            }
            .nav-li:last-child{
              border-bottom: none;
            }
            .nav-li:hover{
              .btn-bgk{
                animation: toCover 0.4s linear;
                width: 100%;
              }
              a{
                color: #ee0a24;
              }
            }
          }
        }
        .box-1{
          box-sizing: border-box;
          border-radius: 10px;
          /*background: #fff;*/

          .carouse-top{
            width: 100%;
            margin-top: 20px;
            .images{
              width: 100%;
              height: 150px;
              object-fit: cover;
              border-radius: 10px;
            }
          }
        }
      }
      .box-left{
        width: 350px;
      }

      .style-item{
        width: 100%;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #409EFF;
        padding: 13px 0;
        justify-content: center;
        i{
          font-size: 16px;
          font-weight: 600;
        }
        a{
          margin-right: 5px;
          color: #409EFF;
        }
      }

      .box-right{
        width: 930px;

        background: #fff;
        margin-top: 40px;
        border-radius: 10px;
        padding: 10px 20px;
        box-sizing: border-box;
        .box-top-nav{
          width: 100%;
          height: 50px;
          border-bottom: 1px solid #f9f6f9;
          display: flex;
          align-items: center;
          justify-content: space-between;
          b{
            width: 60%;
            font-size: 16px;
            a{
              color: #ee0a24;
            }
          }
          .box-buy{
            margin-right: 20px;
            min-width: 250px;
            display: flex;
            justify-content: space-between;
            a{
              margin-left: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 14px;
              padding: 0 15px;
              height: 35px;
              background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
              width: 150px;
              border-radius: 5px;
              color: #fff;
            }
          }
          .right-a{
            width: 100px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            a{
              display: flex;
              justify-content: center;
              align-items: center;
              height: 23px;
              width: 23px;

              border-radius: 1px;
              border:1px solid #f6f6f6;
              img{
                width: 16px;
                height: 16px;
                object-fit: cover;
              }
            }
            .active{
              background: #ffe2e2;
              border:1px solid #ee0a24;
            }
          }
        }
        .box-doc-1{
          width: 100%;
          margin-top: 15px;
          position: relative;
        }
        .btn-top{
          width: 890px;
          height: 70px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background:rgba(255,255,255,0.95);
          border-radius: 10px;
          position: fixed;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          padding: 0 15px;
          box-sizing: border-box;
          top:100px;
          z-index: 999;
          b{
            font-size: 16px;
            a{
              color: #ee0a24;
            }
          }
          div{

            display: flex;
            justify-content: space-between;
            a{
              margin-right: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 14px;
              padding: 0 15px;
              height: 35px;
              background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
              width: 120px;
              border-radius: 5px;
              color: #fff;
            }
          }

        }
      }

      @keyframes toCover {
        0%{
          width: 10px;
        }
        50%{
          width: 50%;
        }
        100%{
          width: 100%;
        }
      }

    }

  }

  @media all and (max-width: 1250px) {
    .hot-box {
      width: 1300px;
      min-height: 200px;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      position: relative;

      .box-left {
        display: none;
      }

      .box-left {
        display: none;
      }


      .style-item{
        width: 100%;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #409EFF;
        padding: 13px 0;
        justify-content: center;
        i{
          font-size: 16px;
          font-weight: 600;
        }
        a{
          margin-right: 5px;
          color: #409EFF;
        }
      }

      .box-right{
        width: 930px;
        min-height: 600px;
        background: #fff;
        margin-top: 40px;
        border-radius: 10px;
        padding: 10px 20px;
        box-sizing: border-box;
        .box-top-nav{
          width: 100%;
          height: 50px;
          border-bottom: 1px solid #f9f6f9;
          display: flex;
          align-items: center;
          justify-content: space-between;
          b{
            width: 60%;
            font-size: 16px;
            a{
              color: #ee0a24;
            }
          }
          .box-buy{
            margin-right: 20px;
            min-width: 250px;
            display: flex;
            justify-content: space-between;
            a{
              margin-left: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 14px;
              padding: 0 15px;
              height: 35px;
              background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
              width: 150px;
              border-radius: 5px;
              color: #fff;
            }
          }
          .right-a{
            width: 100px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            a{
              display: flex;
              justify-content: center;
              align-items: center;
              height: 23px;
              width: 23px;

              border-radius: 1px;
              border:1px solid #f6f6f6;
              img{
                width: 16px;
                height: 16px;
                object-fit: cover;
              }
            }
            .active{
              background: #ffe2e2;
              border:1px solid #ee0a24;
            }
          }
        }
        .box-doc-1{
          width: 100%;
          margin-top: 15px;
          position: relative;
        }
        .btn-top{
          width: 890px;
          height: 70px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background:rgba(255,255,255,0.95);
          border-radius: 10px;
          position: fixed;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          padding: 0 15px;
          box-sizing: border-box;
          top:100px;
          z-index: 999;
          b{
            font-size: 16px;
            a{
              color: #ee0a24;
            }
          }
          div{

            display: flex;
            justify-content: space-between;
            a{
              margin-right: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 14px;
              padding: 0 15px;
              height: 35px;
              background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
              width: 120px;
              border-radius: 5px;
              color: #fff;
            }
          }

        }
      }

      @keyframes toCover {
        0% {
          width: 10px;
        }
        50% {
          width: 50%;
        }
        100% {
          width: 100%;
        }
      }
    }
  }
</style>
